<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="./style.css">
  <title>carousel</title>
</head>

<body>
  <div id="wrap">

    <div class="carousel">
      <div id="selects">
        <input type="button" name="fade" value="淡入淡出" class="active">
        <input type="button" name="slide" value="滑动">
        <input type="button" name="zoom" value="缩放">
      </div>

      <div class="view">
        <div class="images">
          <a href="#">
            <img src="./image/img1.jpg" alt="图片1">
          </a>
          <a href="#">
            <img src="./image/img2.jpg" alt="图片2">
          </a>
          <a href="#">
            <img src="./image/img3.jpg" alt="图片3">
          </a>
          <a href="#">
            <img src="./image/img4.jpg" alt="图片4">
          </a>
        </div>
      </div>
      <div class="actions">
        <span class="previous">上一张</span>
        <div class="dots">
          <span class="active"></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
        <span class="next">下一张</span>
      </div>
    </div>
  </div>

  <script src="./main.js"></script>
</body>

</html>